<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit" label-width="110px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingLevel')">
                        <el-select
                            clearable
                            v-model="queryForm.trainingLevelList"
                            multiple
                            collapse-tags
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingCategory')">
                        <el-select
                            clearable
                            v-model="queryForm.trainingCategory"
                            collapse-tags
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.trainingCategory"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('dic.degreeType')">
                        <el-select
                            clearable
                            v-model="queryForm.degreeType"
                            collapse-tags
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.degreeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.formLearning')">
                        <el-select
                            clearable
                            v-model="queryForm.formLearning"
                            collapse-tags
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.formLearning"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申请开始时间">
                        <el-date-picker
                            clearable
                            value-format="timestamp"
                            style="width:100%"
                            v-model="queryForm.appStartTime"
                            type="datetime"
                            placeholder="申请开始时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申请结束时间">
                        <el-date-picker
                            clearable
                            value-format="timestamp"
                            style="width:100%"
                            v-model="queryForm.appEndTime"
                            type="datetime"
                            placeholder="申请结束时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="变更字段">
                        <el-select
                            v-model="queryForm.field"
                            style="width: 100%"
                            clearable
                            filterable
                        >
                            <el-option
                                v-for="item in options.fields"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="变更开始时间">
                        <el-date-picker
                            clearable
                            value-format="timestamp"
                            style="width:100%"
                            v-model="queryForm.chaStartTime"
                            type="datetime"
                            placeholder="变更开始时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="变更结束时间">
                        <el-date-picker
                            clearable
                            value-format="timestamp"
                            style="width:100%"
                            v-model="queryForm.chaEndTime"
                            type="datetime"
                            placeholder="变更结束时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('abnormal.updateType')">
                        <el-select
                            clearable
                            v-model="queryForm.appliTypeList"
                            collapse-tags
                            style="width: 100%;"
                            multiple
                        >
                            <el-option
                                v-for="item in options.appliType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">信息变更日志</div>
            <el-row style="margin-bottom:16px">
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        :placeholder="$t('score.failScoreManage.pleaseInt')"
                        @keyup.enter.native="onSubmit"
                        style="width:200px"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        ></i>
                    </el-input>
                </el-col>
                <el-col :span="20">
                    <div class="float-right">
                        <!-- <el-button @click="exportLog">{{$t('message.export')}}</el-button>
                        <el-button @click="exportDBF" v-if="global.projectId == 1">导出信息变更DBF</el-button> -->
                        <el-dropdown
                        trigger="click"
                        @command="handleImportCommand"
                    >
                        <el-button>
                            导出
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="exportLog"
                                >信息变更日志列表</el-dropdown-item
                            >
                            <el-dropdown-item command="exportDBF" v-if="global.projectId == 1"
                                >信息变更DBF</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                :data="logs"
                size="mini"
                style="width:100%"
                :order="false"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :page-num="queryForm.pageNum_"
                @selection-change="selectionChange"
            >
                <el-table-column :label="$t('label.stuCode')" fixed="left" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.studentId }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.stuName')" fixed="left" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('label.trainingLevel')"
                    width="120"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('label.trainingCategory')"
                    width="120"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">{{ scope.row.trainingCategoryI18n }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('label.degreeCategory')"
                    width="120"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">{{ scope.row.degreeTypeI18n }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('label.formLearning')"
                    width="120"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">{{ scope.row.formLearningI18n }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('abnormal.updateType')"
                    width="120"
                    show-overflow-tooltip
                    prop="appliType"
                ></el-table-column>
                <el-table-column label="变更字段" width="120" show-overflow-tooltip prop="field"></el-table-column>
                <el-table-column label="变更前值" width="120" show-overflow-tooltip prop="oldValue"></el-table-column>
                <el-table-column label="变更后值" width="120" show-overflow-tooltip prop="newValue"></el-table-column>
                <el-table-column label="申请时间" show-overflow-tooltip width="160">
                    <template slot-scope="scope">{{ getDateFormat(scope.row.appliedTime) }}</template>
                </el-table-column>
                <el-table-column label="变更时间" width="160" show-overflow-tooltip>
                    <template slot-scope="scope">{{ getDateFormat(scope.row.changedTime) }}</template>
                </el-table-column>
                <el-table-column label="处理终端" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.processedIp }}</template>
                </el-table-column>
                <el-table-column label="处理人" width="140" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.processor }}</template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import moment from "moment";
import { getLogList, exportLogList, findAllStuDicts, exportChangeDbf } from "common/src/api/studentinfo";
import mixin from 'common/src/mixins/index';
export default {
    name: "stuStatusChangeLog",
    mixins: [mixin],
    data() {
        return {
            queryForm: {
                keyWord: null,
                trainingLevelList: [],
                trainingCategory: null,
                degreeType: null,
                formLearning: null,
                field: null,
                appliTypeList: [],
                appStartTime: null,
                appEndTime: null,
                chaStartTime: null,
                chaEndTime: null,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            options: {
                trainingLevel: [],
                trainingCategory: [],
                degreeType: [],
                formLearning: [],
                appliType: [],
                fields: []
            },
            logs: [],
            selectedList: []
        };
    },
    mounted() {
        this.init();
        this.initFields();
    },
    methods: {
        init() {
            this.options.appliType.push({
                label: "信息激活",
                value: 1
            });
            this.options.appliType.push({
                label: "学生修改",
                value: 2
            });
            this.options.appliType.push({
                label: "院审字段",
                value: 3
            });
            this.options.appliType.push({
                label: "校审字段",
                value: 4
            });
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_PYLB", "X_XWLX", "X_XXXS"]
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            trainingLevel: "X_PYCC",
                            formLearning: "X_XXXS",
                            trainingCategory: "X_PYLB",
                            degreeType: "X_XWLX"
                        },
                        res.data,
                        this.options
                    );
                }
            });
            this.onSubmit();
        },
        initFields() {
            findAllStuDicts().then(res => {
                if (res.code == 200) {
                    this.options.fields = res.data.map(option => {
                        return {
                            label: option.name,
                            value: option.id
                        };
                    });
                }
            });
        },
        reset() {
            this.queryForm.keyWord = null;
            this.queryForm.trainingLevelList = [];
            this.queryForm.trainingCategory = null;
            this.queryForm.degreeType = null;
            this.queryForm.formLearning = null;
            this.queryForm.field = null;
            this.queryForm.appliTypeList = [];
            this.queryForm.chaStartTime = null;
            this.queryForm.chaEndTime = null;
            this.queryForm.appStartTime = null;
            this.queryForm.appEndTime = null;
            this.onSubmit();
        },
        onSubmit(isFirstPage = true) {
            if (
                this.queryForm.appStartTime &&
                this.queryForm.appEndTime &&
                this.queryForm.appStartTime > this.queryForm.appEndTime
            ) {
                this.$message({
                    type: "warning",
                    message: "申请开始时间不能大于申请结束时间"
                });
                return;
            }
            if (
                this.queryForm.chaStartTime &&
                this.queryForm.chaEndTime &&
                this.queryForm.chaStartTime > this.queryForm.chaEndTime
            ) {
                this.$message({
                    type: "warning",
                    message: "变更开始时间不能大于变更结束时间"
                });
                return;
            }
            if (isFirstPage) {
                this.queryForm.pageNum_ = 1;
            }
            getLogList(this.getQueryForm()).then(res => {
                if (res.code == 200) {
                    this.logs = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        exportLog() {
            let queryForm = null;
            if (this.selectedList.length > 0) {
                queryForm = { ids: this.selectedList.map(s => s.id) };
            } else {
                queryForm = this.getQueryForm();
                queryForm.trainingLevels = queryForm.trainingLevelList.join(
                    ","
                );
                queryForm.trainingLevelList = null;
                queryForm.pageSize_ = null;
                queryForm.pageNum_ = null;
                queryForm.total_ = null;
            }
            window.open(exportLogList(queryForm));
        },
        exportDBF() {
            let queryForm = null;
            if (this.selectedList.length > 0) {
                queryForm = { ids: this.selectedList.map(s => s.id) };
            } else {
                queryForm = this.getQueryForm();
                queryForm.trainingLevels = queryForm.trainingLevelList.join(
                    ","
                );
                queryForm.trainingLevelList = null;
                queryForm.pageSize_ = null;
                queryForm.pageNum_ = null;
                queryForm.total_ = null;
            }
            window.open(exportChangeDbf(queryForm));
        },
        handleImportCommand(command) {
            let queryForm = null;
            if (this.selectedList.length > 0) {
                queryForm = { ids: this.selectedList.map(s => s.id) };
            } else {
                queryForm = this.getQueryForm();
                queryForm.trainingLevels = queryForm.trainingLevelList.join(
                    ","
                );
                queryForm.trainingLevelList = null;
                queryForm.pageSize_ = null;
                queryForm.pageNum_ = null;
                queryForm.total_ = null;
            }
            if(command === 'exportDBF') {
                window.open(exportChangeDbf(queryForm));
            } else if(command === 'exportLog') {
                window.open(exportLogList(queryForm));
            }

        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit(false);
        },
        getQueryForm() {
            let queryForm = _.cloneDeep(this.queryForm);
            return queryForm;
        },
        getDateFormat(val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : null;
        },
        selectionChange(val) {
            this.selectedList = val;
        }
    }
};
</script>
